<template>
  <div>
    <el-drawer
      v-model="props.visible"
      @opened="onOpened"
      @closed="emit('update:visible', false)"
      direction="btt"
      size="100%"
    >
      <template #title>
        <span style="font-size: 16px; font-weight: bold">流程模拟 </span>
        <span style="float: right; margin-right: 50px"
          >当前用户：{{ appUserStore.currentUser.name }}</span
        >
      </template>

      <el-row>
        <el-col :span="12">
          <el-text class="mx-1" size="large">发起面板</el-text>
          <div class="content-box">
            <CreateWorkTask
              ref="createWorkTaskRef"
              :workflowInfo="props.value"
              @workTaskStart="workTaskStart"
              @workTaskReset="workTaskReset"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <el-text class="mx-1" size="large">审批面板</el-text>
          <div class="content-box">
            <el-card shadow="never" class="box-card" style="margin-top: 10px" v-if="worktaskId&&worktaskId.length>0">
              <template #header> 小部件（示例） </template>
              <el-link target="_blank" :href="`/index.html#/components/FormDetail?${componmentParameters}`">
                表单详情
                <el-icon><Link /></el-icon>
              </el-link>
              &nbsp;&nbsp;
              <el-link target="_blank" :href="`/index.html#/components/ProveNodeUser?${componmentParameters}`">
                审批用户
                <el-icon><Link /></el-icon>
              </el-link>
              &nbsp;&nbsp;
              <el-link target="_blank" :href="`/index.html#/components/FlowDesign?${componmentParameters}`">
                流程设计
                <el-icon><Link /></el-icon>
              </el-link>
              &nbsp;&nbsp;
              <el-link target="_blank" :href="`/index.html#/components/ProveCard?${componmentParameters}`">
                审批操作
                <el-icon><Link /></el-icon>
              </el-link>
            </el-card>
            <ProcessWorkTask ref="processWorkTaskRef" :task-id="worktaskId" />
          </div>
        </el-col>
      </el-row>
      <div></div>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, unref, nextTick, watch, computed } from "vue";
import { useAppUserStore } from "@/stores/appUser";
import CreateWorkTask from "./CreateWorkTask.vue";
import ProcessWorkTask from "@/components/WorkflowDesign/FlowProcesses/ProcessWorkTask.vue";
const props = defineProps({
  visible: {
    default: false,
  },
  value: {
    default: () => ({
      id: "",
      version: 0,
      formVersion: 0,
    }),
  },
});

const emit = defineEmits(["update:visible", "closed", "update:value"]);

const createWorkTaskRef = ref(null);
const processWorkTaskRef = ref(null);

const appUserStore = useAppUserStore();


const worktaskId = ref("");

const componmentParameters = computed(() => {
  return `taskId=${worktaskId.value}&token=${ appUserStore.token }`
})

const workTaskReset = () => {
  worktaskId.value = "";
}
const workTaskStart = (data) => {
  worktaskId.value = data.taskId;
  // processWorkTaskRef.value.load();
};

const onOpened = async () => {
  await nextTick();
  createWorkTaskRef.value.load();
  worktaskId.value = "";
};
</script>

<style lang="less" scoped>

.content-box {
  padding: 10px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  margin-top: 10px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
</style>
